<template>
  <div>
    <TodosHeader @addList="addList"></TodosHeader>

    <TodosBody :list="renderList"
     @dellBtn="dellBtn"></TodosBody>

    <TodosFooter 
    @clearnBtn="clearnBtn"
    :list="list"
    :type="type"
    @add="add"
    ></TodosFooter>
  </div>
</template>

<script>
// 1引入
import TodosHeader from './components/TodosHeader.vue'
import TodosBody from './components/TodosBody.vue'
import TodosFooter from './components/TodosFooter.vue'

export default {
  //2.注册
  components: {
    TodosHeader,
    TodosBody,
    TodosFooter,
  },

  data() {
    return {
      list: [
        {
          id: '1',
          uname: '能写多少写多少',
          flag: true,
        },
        {
          id: '2',
          uname: '及格及格及格',
          flag: false,
        },
        {
          id: '3',
          uname: '冲冲冲',
          flag: false,
        },
      ],
      type:'all'
    }
  },

  //渲染类型
  computed: {

    renderList(){
      if(this.type==="all"){
        return this.list;

      }else if (this.type==="active"){
        return this.list.filter((item)=>item.flag===false);

      }
      else{
        return this.list.filter((item)=>item.flag===true)
      }
    }
  },
  watch: {},
  created() {},
  methods: {
    //删除事件
    dellBtn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },

    //添加事件
    addList(uname) {
      this.list = [
        ...this.list,
        {
          id: +new Date(),
          uname: uname,
          flag: false,
        },
      ]
    },

    //清除已完成事件
    clearnBtn() {
     this.list=this.list.filter((item)=>!item.flag)


    },
  add(type){
    this.type=type
  }
 
  },
}
</script>

<style scoped></style>
